<template>
  <div>
    <el-drawer
      size="650px"
      :visible.sync="drawer"
      direction="rtl"
      :show-close="false"
    >
      <div slot="title" class="title l-f l-row-sb">
        <div class="title_label">分站超管详情</div>
        <div>
          <el-button @click="drawer = false" size="mini">关 闭</el-button>
        </div>
      </div>
      <div class="content" v-loading="loading">
        <el-form
          ref="ruleForm"
          label-width="180px"
        >
          <el-form-item label="分站名称：">
            <div class="value">{{ruleForm.name}}</div>
          </el-form-item>
          <el-form-item label="分站超管账号：">
            <div class="value">{{ruleForm.account}}</div>
          </el-form-item>
          <el-form-item label="分站超管姓名：">
            <div class="value">{{ruleForm.realName}}</div>
          </el-form-item>
          <el-form-item label="手机号：">
            <div class="value">{{ruleForm.phone}}</div>
          </el-form-item>
          <el-form-item label="所在地区：">
            <div class="value">{{ruleForm.cityName}}</div>
          </el-form-item>
          <el-form-item label="账号是否独立：">
            <div class="value">{{ruleForm.independent === 1 ? '是' : '否'}}</div>
          </el-form-item>
          <template v-if="ruleForm.independent === 1">
            <!-- 小程序配置 -->
            <el-form-item label="AppID(小程序ID)：">
              <div class="value">
                {{ruleForm.routineAppid}}
                <el-button v-if="ruleForm.routineAppid" type="text" @click="onCopy(ruleForm.routineAppid,$event)">复制</el-button>
              </div>
            </el-form-item>
            <el-form-item label="AppSecret(小程序密钥)：">
              <div class="value">
                {{ruleForm.routineAppsecret}}
                <el-button v-if="ruleForm.routineAppsecret" type="text" @click="onCopy(ruleForm.routineAppsecret,$event)">复制</el-button>
              </div>
            </el-form-item>
            <!-- 小程序支付配置 -->
            <el-form-item label="商户号：">
              <div class="value">
                {{ruleForm.payRoutineMchid}}
                <el-button v-if="ruleForm.payRoutineMchid" type="text" @click="onCopy(ruleForm.payRoutineMchid,$event)">复制</el-button>
              </div>
            </el-form-item>
            <el-form-item label="支付证书：">
              <div class="value">
                {{ruleForm.payRoutineCertificatePath}}
                <el-button v-if="ruleForm.payRoutineCertificatePath" type="text" @click="onCopy(ruleForm.payRoutineCertificatePath,$event)">复制</el-button>
              </div>
            </el-form-item>
            <el-form-item label="支付秘钥：">
              <div class="value">
                {{ruleForm.payRoutineKey}}
                <el-button v-if="ruleForm.payRoutineKey" type="text" @click="onCopy(ruleForm.payRoutineKey,$event)">复制</el-button>
              </div>
            </el-form-item>
          </template>
          <el-form-item label="是否开启：" prop="status">
            <div class="value">{{ruleForm.status ? '是' : '否'}}</div>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { getCityDetail } from "@/api/city";
import handleClipboard from '@/utils/clipboard'
export default {
  data() {
    return {
      drawer: false,
      currentId: "",
      ruleForm: {
        account: "",
        pwd: "",
        checkPwd: "",
        cityName: "",
        independent: 0, // 账号是否独立 0：否 1：是
        name: "",
        phone: "",
        realName: "",
        status: true,
        routineAppid: "",
        routineAppsecret: "",
        payRoutineMchid: "",
        payRoutineCertificatePath: "",
        payRoutineKey: "",
      },
      cityList: [],
      loading: false,
    };
  },
  methods: {
    open(item) {
      this.currentId = item.id;
      this.ruleForm.cityName = item.city
      this.getDetail();
      this.drawer = true;
    },
    // 获取详情
    async getDetail() {
      this.loading = true;
      const res = await getCityDetail({
        id: this.currentId,
      });
      this.loading = false;
      const {
        account,
        independent,
        name,
        phone,
        realName,
        status,
        wxPay,
        wxProgram,
      } = res;
      this.ruleForm.account = account;
      this.ruleForm.independent = independent;
      this.ruleForm.name = name;
      this.ruleForm.phone = phone;
      this.ruleForm.realName = realName;
      this.ruleForm.status = status;
      if (wxProgram) {
        try {
          let { routine_appid, routine_appsecret } = JSON.parse(wxProgram);
          this.ruleForm.routineAppid = routine_appid;
          this.ruleForm.routineAppsecret = routine_appsecret;
        } catch (error) {
          console.log("微信小程序配置解析出错", wxProgram);
        }
      }
      if (wxPay) {
        try {
          let {
            pay_routine_mchid,
            pay_routine_certificate_path,
            pay_routine_key,
          } = JSON.parse(wxPay);
          this.ruleForm.payRoutineMchid = pay_routine_mchid;
          this.ruleForm.payRoutineCertificatePath =
            pay_routine_certificate_path;
          this.ruleForm.payRoutineKey = pay_routine_key;
        } catch (error) {
          console.log("微信小程序支付配置解析出错", wxPay);
        }
      }
    },
    // 复制
    async onCopy(text,e) {
      handleClipboard(text,e)
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  border-bottom: 1px solid #dcdfe6;
  padding-bottom: 20px;
  box-sizing: border-box;
  &_label {
    font-size: 18px;
    font-weight: 700;
  }
}
.content {
  height: calc(100vh - 100px);
  overflow-y: auto;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 60px;
  box-sizing: border-box;
}
.value {
  word-break: break-all;
}
</style>